import { defineComponent, ref } from 'vue';
import { getUserInfo } from '@/api/home';
import Study from '../components/pc/Study';
import Trophy from '../components/pc/Trophy';
import Announce from '../components/pc/Announce';
import Welfare from '../components/pc/Welfare';
import Punish from '../components/pc/Punish';
import Synthesis from '../components/pc/Synthesis';
import MyKpi from '../components/pc/MyKpi';
import Performance from '../components/pc/Performance';
import GroupPerformance from '../components/pc/Performance/GroupPerformance';
import Return from '../components/pc/Return';
import Product from '../components/pc/Product';
import GroupKpi from '../components/pc/GroupKpi';
import Complaint from '../components/pc/Complaint';
import News from '../components/pc/News';
import MyItem from '../components/pc/MyItem';
import GroupItem from '../components/pc/GroupItem';
import './index.less';
import MonthIndicator from '../components/pc/MonthIndicator';

export default defineComponent({
  name: 'Homev2',
  setup() {
    const userInfo = ref() as AnyObject;
    getUserInfo(1).then((res) => {
      userInfo.value = res?.data || {};
      console.log('ccc', userInfo.value);
    });
    return () => (
      <div class="home_wrap">
        {userInfo.value && (
          <div class="homev2">
            <header>
              <Synthesis userInfo={userInfo.value} />
            </header>
            <main class="main flex-between">
              <div class="left">
                <div class="row_1">
                  <News />
                </div>
                <div class="row_1">
                  {(userInfo.value.column?.includes('4') ||
                    userInfo.value.column?.includes('5') ||
                    userInfo.value.column?.includes('6')) && (
                    <GroupPerformance column={userInfo.value.column} />
                  )}
                </div>
                <div class="row_1">
                  {userInfo.value.column?.includes("7") && <MyItem />}
                </div>
                <div class="row_1">
                  {userInfo.value.column?.includes("8") && <GroupItem />}
                </div>

                <div class="row_2 flex-start">
                  {userInfo.value.column?.includes('5') && (
                    <div class="row_2_1">
                      <Performance />
                    </div>
                  )}
                  <div class="row_2_1">
                    <MyKpi />
                  </div>
                  {userInfo.value.column &&
                    !userInfo.value.column.includes('5') && (
                      <div class="row_2_1">
                        <Return type="small" />
                      </div>
                    )}
                </div>
                <div class="row_1">
                  {userInfo.value.column?.includes('5') && (
                    <Return aspectRatio="4/1" type="big" />
                  )}
                </div>
                <div class="row_1">
                  {/* <Complaint /> */}
                  <MonthIndicator />
                </div>
                <div class="row_1">
                  <Product />
                </div>
              </div>
              <div class="right">
                <div class="right_item">
                  <Announce />
                </div>
                <div class="right_item">
                  <Study />
                </div>
                <div class="right_item">
                  <Trophy />
                </div>
                <div class="right_item">
                  <Welfare />
                </div>
                <div class="right_item">
                  <Punish />
                </div>
                {/* <div class="right_item">
                  <GroupKpi />
                </div> */}
              </div>
            </main>
          </div>
        )}
      </div>
    );
  }
});
